<template>
    <div class="StoreSettingTO">
        <Navbar :navtitle="title"></Navbar>
        <div class="list">
            <p><em class="em">门店状态</em> <i v-for="(item,index) in Xying" :key="index" :class="{action : currem==index}" @click="Huan(index)">{{item.name}}</i></p>
            <p>
                <em class="em">营业时间</em> 
                <van-popup v-model="show" position="bottom" :overlay="true">
                    <van-datetime-picker
                        v-model="currentDate"
                        type="time"
                        :min-hour="minHour"
                        :max-hour="maxHour" 
                        @cancel="onCancel"
                        @confirm="onConfirm"
                    />
                </van-popup>
                <van-popup v-model="show2" position="bottom" :overlay="true">
                    <van-datetime-picker
                        v-model="currentDate2"
                        type="time"
                        :min-hour="minHour2"
                        :max-hour="maxHour2" 
                        @cancel="onCancel2"
                        @confirm="onConfirm2"
                    />
                </van-popup>
                <em @click="showw" class="tim">{{timer}}</em>
                <i>-</i>
                <em @click="showw2" class="tim">{{timer2}}</em>
            </p>
            <div class="Distribution">
                <p class="p1"><em>配送设置</em><span><img src="../assets/4 (2).png" alt="" v-if="img" @click="Setimg"><img src="../assets/4 (1).png" alt="" v-else @click="Setimg">支持配送</span></p>
                <div class="Distribution_list" v-if="img">
                    <p class="Pone"><em class="em">配送范围</em><input type="text" name="" id="" maxlength="6" placeholder="请设置配送范围" value=""><span class="gongli">公里</span></p>
                    <p class="Pone"><em class="em">起送金额</em><input type="text" name="" id="" maxlength="6" placeholder="请设置起送金额"><span class="gongli">元</span></p>
                    <p class="Pone"><em class="em">配送费</em><input type="text" name="" id="" maxlength="6" placeholder="请设置配送费"><span class="gongli">元</span></p>
                    <p class="Pone"><em class="em">免运费,满</em><input type="text" name="" id="" maxlength="6" placeholder="请设置免运费金额"><span class="gongli">元</span></p>
                    <p class="Pone"><em class="em">配送时间</em>
                        <van-popup v-model="show3" position="bottom" :overlay="true">
                            <van-datetime-picker
                                v-model="currentDate3"
                                type="time"
                                :min-hour="minHour3"
                                :max-hour="maxHour3" 
                                @cancel="onCancel3"
                                @confirm="onConfirm3"
                            />
                        </van-popup>
                        <van-popup v-model="show4" position="bottom" :overlay="true">
                            <van-datetime-picker
                                v-model="currentDate4"
                                type="time"
                                :min-hour="minHour4"
                                :max-hour="maxHour4" 
                                @cancel="onCancel4"
                                @confirm="onConfirm4"
                            />
                        </van-popup>
                        <em @click="showw3" class="timM">{{timer3}}</em>
                        <i>-</i>
                        <em @click="showw4" class="timM">{{timer4}}</em>
                    </p>
                </div>
            </div>
        </div>
        <div class="buttom" @click="InsertShopShipingArea">完成</div>
    </div>
</template>
<script>
import Navbar from '../components/Navbar';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker)
import { Popup } from 'vant';
Vue.use(Popup);
import Vue from 'vue'
export default {
    components:{
        Navbar
    },
    data(){
        return{
            title:'',
            Xying:[
                {name:"正在营业"},
                {name:"关闭"}
            ],
            currem:0,
            show: false,
            show2:false,
            show3:false,
            show4:false,
            currentDate: '12:00',
            timer:'08:00',
            minHour: 0,
            maxHour: 23,
            currentDate2: '12:00',
            timer2:'12:00',
            minHour2: 0,
            maxHour2: 23,
            currentDate3: '12:00',
            timer3:'08:00',
            minHour3: 0,
            maxHour3: 23,
            currentDate4: '12:00',
            timer4:'12:00',
            minHour4: 0,
            maxHour4: 23,
            img:true,
            vlue1:'1'
        }
    },
    methods:{
        Huan(index){
            this.currem = index
        },
        showw(){
            this.show = !this.show
        },
        onCancel(){
            this.show = false
        },
        onConfirm(){
            this.show = false
            this.timer = this.currentDate
        },
        showw2(){
            this.show2 = !this.show2
        },
        onCancel2(){
            this.show2 = false
        },
        onConfirm2(){
            this.show2 = false
            this.timer2 = this.currentDate2
        },
        showw3(){
            this.show3 = !this.show3
        },
        onCancel3(){
            this.show3 = false
        },
        onConfirm3(){
            this.show3 = false
            this.timer3 = this.currentDate3
        },
        showw4(){
            this.show4= !this.show4
        },
        onCancel4(){
            this.show4 = false
        },
        onConfirm4(){
            this.show4 = false
            this.timer4 = this.currentDate4
        },
        Setimg(){
            this.img = !this.img
        },
        InsertShopShipingArea(){
            let headers = {
                "content-type": "application/json"
            };
            if (this.$store.state.token) {
                headers = {
                    "content-type": "application/json",
                    token: this.$store.state.token,
                    userid: this.$store.state.userInfo.id
                };
            }
            let params = {
                businessEndTime:this.timer2,
                businessStartTime:this.timer,
                businessState:1,
                createUser:this.$store.state.createUser,
                deliveryArea:"2.00",
                deliveryTimeBegin:this.timer3,
                deliveryTimeEnd:this.timer4,
                freeDeliveryFee:null,
                id:98,
                shippingFee:"10",
                shopId:6694,
                startingAmount:null,
                storeId:"66958",
                supportDelivery:1
            }
            this.$http.post('https://web-gateway.newbeescm.com/ms-web/shopInfoController/insertShopShipingArea',{
                ...params
            },{headers})
            .then( res=>{
                console.log(res)
                this.$router.back(-1)
            })
            .catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
<style scoped lang="scss">
em {
  font-style: normal;
}
input{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
i {
  font-style: normal;
}
.StoreSettingTO{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #F2F1F6;
    height: 100%;
    width: 100%;
}
.list{
    position: relative;
    font-size: 0.14rem;
    &::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background: #ccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    p{
        padding: 0.12rem 0.14rem;
        background: #Fff;
        position: relative;
            &::after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                background: #ccc;
                width: 100%;
                height: 1px;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        .action{
            color: #dd3333;
            border: 1px solid #dd3333;
            padding: 0.06rem 0.1rem;
            border-radius: 0.05rem;
            box-sizing: border-box;
        }
        .em{
            width: 1rem;
            display: inline-block;
        }
        i{
            padding: 0.06rem 0.1rem;
            margin-right: 0.3rem
        }
        .tim{
            margin-right: 0.3rem;
        }
    }
    .Distribution{
        margin-top: 0.2rem;
        background: #fff;
        .p1{
            padding: 0.12rem 0.14rem;
            background: #Fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
                display: flex;
                align-items: center;
                img{
                    height: 0.2rem;
                    width: 0.2rem;
                    margin-right: 0.1rem;
                }
            }
        }
    }
    .Distribution_list{
        display: flex;
        flex-wrap: wrap;
        .Pone{
            width: 100%;
            display: inline-block;
            position: relative;
            .em{
                width: 1rem;
                display: inline-block;
            }
            input{
                outline: none;
                border: 0;  
                &::placeholder{
                    color: #ccc;
                }
            }
            .gongli{
                position: absolute;
                right: 0.14rem;
            }
            .timM{
                margin-right: 0.3rem;
            }
        }
    }
}
.buttom{
    width: 100%;
    height: 0.45rem;
    color: #Fff;
    font-size: 0.18rem;
    background: #dd3333;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}
</style>


